<template>
	<view class="">
		<view class="head-box">
			<view class="head-blok f-column">
				<view class="line f-row-Hcenter">
					<view class="project f-row-Hcenter">
						<label>收银员：</label>
						<label>{{resData.head.oper_name}}</label>
					</view>
					<view class="project f-row-Hcenter">
						<label>当班金额：</label>
						<label>{{ resData.head.deal_amt }}</label>
					</view>
				</view>
				<view class="line f-row-Hcenter">
					<view class="project f-row-Hcenter">
						<label>合计金额：</label>
						<label>{{ resData.head.sale_amt }}</label>
					</view>
					<view class="project f-row-Hcenter">
						<label>应交金额：</label>
						<label>{{ resData.head.fact_amt}}</label>
					</view>
				</view>
				<view class="line f-row-Hcenter">
					<label>当班时间：</label>
					<label>{{ resData.head.start_date | yyyy_MM_dd }}</label>
				</view>
				<view class="line f-row-Hcenter">
					<label>交班时间：</label>
					<label>{{ resData.head.end_date | yyyy_MM_dd }}</label>
				</view>
			</view>
		</view>
		<view class="title-box"><sun-tietleBox :tietleData="'交班明细'" :showLine="false"></sun-tietleBox></view>
		<view :id="idTopHeight" class="table-box f-column" :style="{ padding: 0 + ' ' + tableMargin + 'rpx' }">
			<!-- 撑满屏幕 -->
			<!-- :height="topHeight - (tableMargin * 2) +'rpx'" -->
			<wyb-table
				ref="table"
				:width="'710rpx'"
				:defaultColWidth="defaultColWidth"
				:headers="headers"
				:contents="resData.list"
				:header-bg-color="'#128A80'"
				:header-ft-color="'#ffffff'"
				:loading="false"
				:first-line-fixed="false"
				:maxHeight="topHeight - tableMargin * 2 + 'rpx'"
				:min-height="[65, 50]"
			/>
			<view class="toastTitle">{{ query.toastTitle }}</view>
		</view>
	</view>
</template>

<script>
import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
import wybTable from '@/components/wyb-table/wyb-table.vue';
export default {
	components: {
		wybTable,
		sunTietleBox
	},
	data() {
		return {
			//表格高度变量
			idTopHeight: 'table-box',
			tableMargin: 20,
			topHeight: 100,
			//平分表宽
			defaultColWidth: 167,

			optionLoad: {},
			query: {
				branch_jg: '', //机构 支持%为全部机构
				start_date: 10000000,
				end_date: 10000000,
				oper_no: '%', // varchar(4) 收银员 默认传%表示全部
				ischange: true, // 是 bool 请求参数是否修改，如果为false证明文档中的参数没修改，就不查询count，反之查询新的count

				pageindex: 1, // 是 int 页号
				pagesize: 999999, // 是 int 页大小 如果想一次性查询全部时，此参传入999999
				toastTitle: '',
				totalPage: 1 //总页码my
			},
			headers: [
				{
					label: '支付方式',
					key: 'pay_name'
				},
				{
					label: '收银金额',
					key: 'sale_amt'
				}
			],
			resData: {
				list: []
			}
		};
	},
	onLoad: function(option) {
		this.resData.head =  JSON.parse(option.data);
		this.query.sheet_no = this.resData.head.sheet_no ;
		this.$util.getDefaultColWidth(this, 710, 'headers', 'defaultColWidth');
		this.getlogin();
	},
	methods: {
		getlogin() {
			if (!this.resData.head.sheet_no) {
				uni.navigateBack({});
			} else {
				this.query.sheet_no = this.resData.head.sheet_no;
			}
			let query = this.query;
			this.$api_server.dwzy_GetAppSalePayUpAnalysis({
				data: query,
				success: res => {
					if (res.data) {
						//收银合计
						
						this.resData.list = res.data.data;
						this.$util.getTopHeight(this, this.idTopHeight, this.tableMargin);
					}
				},
				fail(error) {
					console.log('rerror>>>', error);
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
@charset "UTF-8";
.head-box {
	margin: 20upx;
	.head-blok {
		padding: 20upx;
		border-radius: 10upx;
		background: rgba(255, 255, 255, 1);
		.line {
			.project {
				width: 50%;
				label {
					&:nth-of-type(1) {
						width: 151upx;
						text-align: right;
					}
				}
			}
		}
	}
}
.title-box {
	margin: 0 20upx;
}

</style>
